import React, { useState } from 'react'
import './Login.scss'
import { useNavigate } from 'react-router-dom'
import Header from './Header.jsx';
import Ispass from './Ispass.jsx';
import { Toast } from 'antd-mobile'
import { getRightCode, register } from '../../utils/request.jsx';//导入接口
export default function Register() {
  const navigate = useNavigate()
  const [userName, setUserName] = useState('')
  const [password, setPassword] = useState('')
  const [email, setEmail] = useState('')
  const [phone, setPhone] = useState('')
  const [code, setCode] = useState('')
  const [rightCode, setRightCode] = useState('')
  const [isShow, setIsShow] = useState(false)
  let [countdown, setCountdown] = useState(60)
  //注册
  const submit = async () => {
    if (Ispass('register', email, password, userName, phone)) {
      if (!code) {
        Toast.show({
          icon: 'fail',
          content: '请完善验证码',
        })
        return
      }
      if (code != rightCode) {
        Toast.show({
          icon: 'fail',
          content: '验证码不正确',
        })
        return
      }
      let res = await register(userName, password, email, phone)
      if (res.code == 200) {
        Toast.show({
          icon: 'success',
          content: res.msg,
        })
        navigate('/login')
      } else {
        setCode('')
        setRightCode('')
        setIsShow(false)
        setCountdown(60)
        setUserName('')
        setPassword('')
        setEmail('')
        setPhone('')
        Toast.show({
          icon: 'fail',
          content: res.msg,
        })
      }
    }
  }
  //获取验证码
  const getCode = async () => {
    let reg = /^1[3-9]\d{9}$/
    if (phone.length != 11 || !reg.test(phone)) {
      Toast.show({
        icon: 'fail',
        content: '请输入手机号',
      })
      return
    }
    let res = await getRightCode(phone)
    if (res.state == 200) {
      setRightCode(res.code)
      setIsShow(true)
      let timer = setInterval(() => {
        if (countdown > 0) {
          setCountdown(countdown--)
        } else {
          clearInterval(timer)
          setIsShow(false)
          setCountdown(60)
          setRightCode('')
          setCode('')
        }
      }, [1000])
    }
  }
  return (
    <div className='register'>
      <Header H1_text={'创建新账号'} P_text={'在此处创建您的账号'}></Header>
      <div className='login_box'>
        <div className='login_box_item'>
          <p>用户名</p>
          <input type="text" placeholder='这里请输入您的用户名' value={userName} onChange={(e) => { setUserName(e.target.value) }} />
        </div>
        <div className='login_box_item'>
          <p>Emall</p>
          <input type="text" placeholder='这里请输入邮箱' value={email} onChange={(e) => { setEmail(e.target.value) }} />
        </div>
        <div className='login_box_item'>
          <p>密码</p>
          <input type="password" placeholder='这里请输入密码' value={password} onChange={(e) => { setPassword(e.target.value) }} />
        </div>
        <div className='login_box_item'>
          <p>手机号</p>
          <div className='phone_flex'>
            <input type="phone" placeholder='这里请输入手机号' value={phone}
              onChange={(e) => { setPhone(e.target.value) }} className='phone' />
            <input type="text" placeholder={`验证码${countdown}`} className='code' value={code}
              onChange={(e) => { setCode(e.target.value) }} style={{ display: isShow ? 'inline-block' : 'none' }} />
            <button className='get_code' onClick={getCode} style={{ display: !isShow ? 'inline-block' : 'none' }}>获取验证码</button>
          </div>
        </div>
        <button className='login_btn' onClick={submit}>注册</button>
        <div className='register_text'>
          <span>已有账号?</span>
          <span className='blue' onClick={() => { navigate('/login') }}>去登入</span>
        </div>
      </div>
    </div>
  )
}
